<template>
  <div class="UserInfo">
    <!-- 头部导航栏 -->
    <MMnavbar title="我的资料"></MMnavbar>
    <div class="main">
      <MMcell class="iconimg" title="头像">
        <template>
          <!-- 头像 -->
          <img class="imglogo" :src="userInfo.avatar" alt="" />
        </template>
      </MMcell>
      <!-- 详细信息 -->
      <van-cell-group>
        <MMcell title="昵称" :value="userInfo.nickname"></MMcell>
        <MMcell title="性别" :value="gender" @click="isShow2 = true"></MMcell>
        <MMcell title="地区" :value="userArea" @click="isShow3 = true"></MMcell>
        <MMcell title="个人简介" :value="userInfo.intro"></MMcell>
      </van-cell-group>
      <!-- 退出登录 -->
      <van-button type="primary" size="large" @click="logoff"
        >退出登录</van-button
      >
      <van-popup v-model="isShow1" round>
        提示
      </van-popup>
      <!-- 性别 -->
      <van-popup
        v-model="isShow2"
        position="bottom"
        :style="{ height: '30%' }"
        @close="closepoup1"
      >
        <!-- show-toolbar-------------------显示最上面的栏
             title="性别"-------------------标题
             :columns="columns"-------------数据源
             @confirm="onConfirm"-----------确认事件
             @cancel="onCancel"-------------取消事件
             :default-index="genderIndex"---默认显示对应的下标
             ref="genderRef" ---------------调用方法需要增加ref
             -->
        <van-picker
          show-toolbar
          title="性别"
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          :default-index="genderIndex"
          ref="genderRef"
        />
      </van-popup>
      <!-- 地区 -->
      <!-- show-toolbar----------------显示最上面的栏
           title="地区"----------------标题
           @confirm="onConfirm"--------确认事件
           @cancel="onCancel"----------取消事件
           ref="area"------------------调用方法绑定的ref
           :area-list="areaList"-------数据源
           :columns-num="2"------------省市区列数
           value="110101" -------------数据显示对应的绑定的城市
           -->
      <!-- <van-popup
        v-model="isShow3"
        position="bottom"
        :style="{ height: '30%' }"
        @close="closepoup2"
      >
        <van-area
          show-toolbar
          title="地区"
          @confirm="onConfirmcity"
          @cancel="onCancelcity"
          ref="area"
          :area-list="areaobj"
          :columns-num="2"
          value="110101"
        />
      </van-popup> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
// 性别
import { changesex } from '@/api/my.js'

// 地区// 地区数据代码
// import areaobj from '@/utils/area.js'
// import { getToken } from '@/utils/local.js'
export default {
  name: 'userInfo',
  data () {
    return {
      isShow1: false,
      isShow2: false,
      isShow3: false,
      // 地区
      // areaobj,
      // genderIndex: 0,
      columns: ['未知', '男', '女']
    }
  },
  created () {
    // 加载进页面，获取userInfo,页面加载数据
  },
  computed: {
    // 拿到用户信息
    ...mapState(['userInfo']),
    // 拿到城市信息匹配结果
    ...mapGetters(['userArea']),
    // 性别渲染
    genderIndex () {
      return this.userInfo.gender
    },
    gender () {
      const map = { 0: '未知', 1: '男', 2: '女' }
      return map[this.userInfo.gender]
    }
  },
  methods: {
    // 修改用户部分信息
    ...mapMutations(['SETUSERSOME']),
    // 当页面关闭时，加载选中的下标对应的值
    closepoup1 () {
      // 调用组件自带setColumnIndex-需要增加ref属性-----???????0
      this.$refs.genderRef.setColumnIndex(0, this.genderIndex)
    },
    closepoup2 () {},
    // 地区,
    // 2重设
    // resetArea () {
    //   this.$refs.area.reset('150200')
    // },
    // 1确认
    // onConfirm (column) {
    //   // 打印的是一个数组哦
    //   console.log(column)
    // },
    // async onConfirmcity () {
    //   // 弹框提醒
    //   this.$toast.loading({ duration: 0 })
    //   // 关闭弹框
    //   this.isShow3 = false
    //   // 请求
    //   // 1
    //   // editarea = changesex({})
    //   // 2async--await
    //   const editarea = await changesex({})

    //   // 成功提示
    //   this.$toast.success('修改成功')
    //   // 更新页面数据
    //   this.SETUSERSOME({ key: 'area', value: editarea.data.area })
    // },

    // 2取消
    // onCancelcity () {
    //   // 关闭弹框
    //   this.isShow3 = false
    // },
    // 性别
    // 点击确认。发送请求，更新页面editRes数据
    onConfirm (value, index) {
      // 加载提示
      this.$toast.loading({ duration: 0 })
      // 关闭
      this.isShow2 = false
      // 调用公共方法
      // 请求导入路由的方法---------调用方法
      // changesex这个方法需要在token前面增加空格*****
      // 1
      // changesex()
      //   .then(() => {})
      //   .catch(() => {})
      // 修改的是gender,对应下标----异步操作
      // 2
      changesex({ genter: index })
        .then(res => {
          window.console.log(res)
        })
        .catch(err => {
          window.console.log(err)
        })
      // 3
      // const editres = await changedata({ gender: index })
      // window.console.log(('editres', editres))
      // 更新
      // this.SETUSERSOME({ key: 'gender', value })
      // 提示成功
      // this.$toast.success('修改成功')
    },
    // 点击取消，恢复原信息
    onCancel () {
      this.$toast('取消')
    },

    // 点击头像，跳转资料页面

    // 退出
    logoff () {
      // 弹出框
      this.isShow1 = true
      // 清除token
      // deleteToken()
      // 退回登录页
      // this.$router.replace('./login')
    }
  }
}
</script>

<style lang="less">
.UserInfo {
  width: 100%;
  .MMnavbar {
    margin-top: 44px;
  }
  .main {
    padding: 10px;
    .iconimg {
      margin: 13px auto 10px;
      border-radius: 8px;
      .imglogo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .van-button {
      margin-top: 14px;
      border-radius: 8px;
      background-color: @white-color;
      color: @main-color;
      border: transparent;
    }
    .van-popup {
      width: 100%;
      height: 30%;
    }
  }
}
</style>
